<template>
  <section class="related-topics bg-white p-6 rounded-lg shadow-sm">
    <h2 class="text-xl font-semibold mb-4">相关专题</h2>
    <div class="grid grid-cols-3 gap-4">
      <div v-for="topic in topics" :key="topic.id" class="topic-card border rounded overflow-hidden hover:shadow-lg transition-shadow">
        <img :src="topic.image" :alt="topic.title" class="w-full h-32 object-cover" />
        <div class="p-3">
          <h3 class="font-medium mb-1 truncate">{{ topic.title }}</h3>
          <p class="text-sm text-gray-500 mb-2 truncate">{{ topic.description }}</p>
          <div class="flex justify-between items-center text-xs text-gray-400">
            <span class="flex items-center"><el-icon class="mr-1"><Star /></el-icon>{{ topic.likes }}</span>
            <span class="flex items-center"><el-icon class="mr-1"><View /></el-icon>{{ topic.views }}</span>
            <span class="flex items-center"><el-icon class="mr-1"><ChatLineSquare /></el-icon>{{ topic.comments }}</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Star, View, ChatLineSquare } from '@element-plus/icons-vue'

interface Topic {
  id: number;
  title: string;
  description: string;
  image: string;
  likes: string;
  views: string;
  comments: string;
}

// Static data based on the target URL
const topics = ref<Topic[]>([
  { id: 1, title: '5个给春天的生活新提案', description: '餐厨起居洗护好物 19.9元起', image: 'https://via.placeholder.com/300x150/eee/999?text=Topic+1', likes: '1000', views: '10000', comments: '100' },
  { id: 2, title: '5个给春天的生活新提案', description: '餐厨起居洗护好物 19.9元起', image: 'https://via.placeholder.com/300x150/eee/999?text=Topic+2', likes: '1000', views: '10000', comments: '100' },
  { id: 3, title: '5个给春天的生活新提案', description: '餐厨起居洗护好物 19.9元起', image: 'https://via.placeholder.com/300x150/eee/999?text=Topic+3', likes: '1000', views: '10000', comments: '100' },
  { id: 4, title: '5个给春天的生活新提案', description: '餐厨起居洗护好物 19.9元起', image: 'https://via.placeholder.com/300x150/eee/999?text=Topic+4', likes: '1000', views: '10000', comments: '100' },
  { id: 5, title: '5个给春天的生活新提案', description: '餐厨起居洗护好物 19.9元起', image: 'https://via.placeholder.com/300x150/eee/999?text=Topic+5', likes: '1000', views: '10000', comments: '100' },
  { id: 6, title: '5个给春天的生活新提案', description: '餐厨起居洗护好物 19.9元起', image: 'https://via.placeholder.com/300x150/eee/999?text=Topic+6', likes: '1000', views: '10000', comments: '100' },
]);
</script>

<style scoped>
/* Add specific styles if needed */
</style> 